import React,{useState} from 'react'
import {Form,Button,Input, message,Image} from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.css'
import axios from 'axios' 

const Login = (props)=> {
  const[username,setUsername] = useState('');
  const[password,setPassWord] = useState('');  
  const onFinish = values =>{      
    axios({
      method:'post',
      url:"/api/admin/login",
      data:{
        user_name:username,
        password:password
      }
    }).then(res=>{
      if(res.data.message=='管理员登录成功'){
        localStorage.setItem('isLogin',true);
        props.history.replace(props.location.state || '/')

      }else{
        alert('输入的用户名和密码不正确')
      }
    })
  };
  
  return (
    
    <div className='bigContainer' style={{backgroundImage:"url("+require("../../../pic/c.jpg").default+")",height:document.body.scrollHeight,width:document.body.scrollWidth,overflow:'hidden'}}>
 
      <div className='formContainer'>
        <div className='logintitle'>卷王</div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{remember:true}}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" type='text'
            value={username}
             onChange={(e) => setUsername(e.currentTarget.value)}
             />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassWord(e.currentTarget.value)}
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit"  className="login-form-button" >
              登录
            </Button>
           
          </Form.Item>
        </Form>
      </div>

    </div>

  ) 
}
 
export default Login